<template>
  <div class="chain-box">
    <div class="panel">
      <div class="industrial-box">
        <!-- 测试用，正式部署隐藏掉 -->
        <!-- <div class="search-box2">
          <el-input class="elinput" @keyup.enter.native="querySearch" v-model="queryCode" size="mini" placeholder="请输入code">
            <i slot="append" style="color:#333;" class="el-icon-search" @click="querySearch"></i>
          </el-input>
        </div> -->
        
        <!-- <ul class="top10">
          <li v-for="(item, index) in top10Ins" :key="index">
            <span :class="{active: top10InsActive === index, disabled: item.use === false}" :title="item.name">{{item.name}}</span>
          </li>
        </ul> -->
        <!-- 产业链 -->
        <Industrial :data="top10InsActiveItem" @curSelectedNode="getCurSelectedNode"/>
      </div>
      <!-- <div class="company-contrast">
        <Radar :data="patentNumInfo"/>
      </div> -->
    </div>
    <div class="panel2">
      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">人才列表</el-menu-item>
        <!-- <el-menu-item v-show="showOther" index="4">成果动态</el-menu-item> -->
      </el-menu>
      <Talent/>
      <!-- <el-pagination
        background
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :current-page.sync="ipi"
        :page-size="ips"
        :total="total"
        style="text-align:center;margin-top:20px">
      </el-pagination> -->
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import {chainData} from '@/utils/mock/chain'
import {shuangjibanData} from '@/utils/mock/shuangjiban'
// import Industrial from './Industrial'
import Industrial from './Industrial'
// 人才列表
import Talent from './child/Talent'
// 学术文献
import Academic from './child/Academic'
// 科技成果
import Achievement from './child/Achievement'

// import Radar from './Radar'
import companyJson from '@/utils/mock/chainCompany'
import shuangjibanCompanyJson from '@/utils/mock/shuangjibanCompany.json'

export default {
  components: {
    Industrial,
    Talent,
    Academic,
    Achievement
    // Radar
  },
  data() {
    return {
      queryCode: '',
      showIndustrial: true,
      top10Ins: [],
      top10InsActive: 0,
      top10InsActiveItem: {},
      activeIndex: '1',
      tableData: [],
      ipi: 1,
      ips: 10,
      total: 0,
      emptyText: '',
      patentNumInfo: {},
      curSelectedNode: {},
      pingfenSortType: '',
      industrialData: {},
      industrialCompanyData: [],
      showOther: false
    }
  },
  computed:{
    ...mapState(['levelName','levelCode']),
  },
  methods: {
    init() {
      this.top10Ins = [
        {
          name: '氢能',
          code: '0',
          use: true
        },
        {
          name: '火电',
          code: '0',
          use: false
        },
        {
          name: '水电',
          code: '0',
          use: false
        },
        {
          name: '风电',
          code: '0',
          use: false
        },
        {
          name: '光伏',
          code: '0',
          use: false
        },
        {
          name: '核电',
          code: '0',
          use: false
        },
        {
          name: '环保',
          code: '0',
          use: false
        },
        {
          name: '储能',
          code: '0',
          use: false
        },
        {
          name: '煤炭',
          code: '0',
          use: false
        },
        {
          name: '铝业',
          code: '0',
          use: false
        },
        {
          name: '综合智慧能源',
          code: '0',
          use: false
        },
      ]
      this.curSelectedNode = this.top10InsActiveItem = this.top10Ins[0]

      this.industrialData = chainData
      this.industrialCompanyData = JSON.parse(JSON.stringify(companyJson))
      this.getCompanyInfo(this.activeIndex, this.curSelectedNode)
      // this.$get(this.$Url.industrial.getTop10, {
      //   cityCode: this.levelCode
      // }).then(res => {
      //   let data = res.data
      //   if (data) {
      //     this.top10Ins = data
      //     this.curSelectedNode = this.top10InsActiveItem = data[0]
      //     this.getCompanyInfo(this.activeIndex, this.curSelectedNode.code)
      //     this.getPatentNum(this.curSelectedNode.code)
      //   }
      // }).catch(err => {})
    },
    querySearch() {
      if (this.queryCode === '') {
        this.$message({
          type: 'warning',
          message: '请输入code'
        })
        return
      }
      this.$get(this.$Url.industrial.getProductInfoByCode, {
        code: this.queryCode
      }).then(res => {
        let data = res.data
        if (data) {
          this.top10InsActiveItem = data
        }
      }).catch(err => {})
    },
    changeIns(index, item) {
      // this.top10InsActive = index
      // this.curSelectedNode = this.top10InsActiveItem = item
      // this.getCompanyInfo(this.activeIndex, this.curSelectedNode.code)
    },
    // 获取指定城市专利总数，或全国专利总数
    getPatentNum(code) {
      this.$get(this.$Url.industrial.getPatentNum, {
        code,
        province: this.levelName,
        cityCode: this.levelCode
      }).then(res => {
        let data = res.data
        if (data) {
          this.patentNumInfo = data
        }
      }).catch(err => {})
    },
    // local  1:现有企业  2:匹配招商企业
    getCompanyInfo(local, node) {
      if (local === '1') {
        let data = this.industrialData
        let json = this.industrialCompanyData
        
        this.tableData = []
        this.emptyText = '数据加载中...'

        let companyArr = []
        let f = (arr, code) => {
          for (let i in arr) {
            if (arr[i]['companyArr'] && arr[i]['companyArr'].length > 0) {
              if (arr[i].code.indexOf(code) > -1) {
                companyArr.push(...arr[i].companyArr)
              }
            }
            if (arr[i].down) {
              f(arr[i].down, code)
            }
            if (arr[i].up) {
              f(arr[i].up, code)
            }
          }
        }
        
        f(data.down, node.code)
        f(data.center, node.code)
        this.$nextTick(() => {
          f(data.up, node.code)
          const hash = {};
          const newArray = companyArr.reduce((item, next)=>{
            hash[next.name] ? '' : hash[next.name] = true && item.push(next);
            return item;
          },[])
          let tableData = []
          newArray.forEach(v => {
            // 有数据的取出来
            let obj = json.find(b => {
              return b.short_name === v.name || b.name === v.name
            })
            if (obj) {
              if (obj.pingfen) {
                obj.pingfen = (obj.pingfen / 100 * 5)
              }
              tableData.push(obj)
            }
            // else {
            //   tableData.push(v)
            // }
          })
          if (tableData.length <= 0) {
            tableData = newArray
            this.emptyText = '暂无数据'
          }
          this.tableData = tableData
          this.total = newArray.length
        })
      } else if (local === '2') {

      }
    },
    handleSelect(item) {
      this.activeIndex = item
    },
    handleCurrentChange(val) {
      this.ipi = val
      this.getCompanyInfo(this.activeIndex, this.curSelectedNode)
    },
    getCurSelectedNode(node) {
      // this.getPatentNum(this.curSelectedNode.code)
      
      if (node.label === '双极板' && node.id !== '0') {
        node.code = '0'
        this.industrialData = JSON.parse(JSON.stringify(shuangjibanData))
        this.industrialCompanyData = JSON.parse(JSON.stringify(shuangjibanCompanyJson))
        this.activeIndex = '1'
        this.showOther = true
      } else if (node.label === '双极板' && node.id === '0') {
        this.industrialData = JSON.parse(JSON.stringify(chainData))
        this.industrialCompanyData = JSON.parse(JSON.stringify(companyJson))
        this.activeIndex = '1'
        this.showOther = false
      }

      
      this.curSelectedNode = node
      this.ipi = 1

      this.$nextTick(() => {
        this.getCompanyInfo(this.activeIndex, this.curSelectedNode)
      })

      
    },
    toDetail(row) {
      this.$Bus.$emit("progressBar", row.name)
    },
    // 监听排序，对专利评分进行自定义排序
    sortChange(e) {
      let order = e.order
      if (e.prop === 'pingfen') {
        if (this.pingfenSortType !== order) {
          this.pingfenSortType = order
        } else {
          this.pingfenSortType = ''
        }
        this.getCompanyInfo(this.activeIndex, this.curSelectedNode)
      }
    }
  },
  watch: {
    activeIndex() {
      this.ipi = 1
      this.getCompanyInfo(this.activeIndex, this.curSelectedNode)
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.chain-box {
  position: relative;
  .panel {
    position: relative;
    // display: flex;
    width: 100%;
    margin-bottom: 20px;
    background-color: #fff;
    .industrial-box {
      // flex: .65;
      // flex: 1;
      width: 100%;
      .top10 {
        position: relative;
        display: flex;
        padding: 20px 20px 0;
        flex-wrap: wrap;
        list-style: none;
        li {
          width: 16.666%;
          min-width: 0;
          padding: 0 4px;
          span {
            display: inline-block;
            width: 100%;
            line-height: 16px;
            padding: 6px;
            border: 1px solid #524CAB;
            border-radius: 4px;
            box-sizing: border-box;
            text-align: center;
            font-size: 13px;
            color: #524CAB;
            cursor: pointer;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            &.active {
              color: #fff;
              background-color: #524CAB;
            }
            &.disabled {
              // color: #fff;
              // background-color: #eee;
            }
          }
        }
      }
    }
    .company-contrast {
      position: relative;
      flex: .35;
      min-height: 500px;
      border-left: 1px solid #EBEEF5;
    }
  }
  .panel2 {
    position: relative;
    width: 100%;
    .weight {
      font-weight: 600;
    }
  }
}
.tit {
  cursor: pointer;
}
.sort-caret-active {
  border-bottom-color: $mainColor !important;
}
</style>